<template>
  <div>
    <el-button @click="order">排序</el-button>
    <el-row>
      <el-col :span="12">
        <div class="box">
          <draggable :list="list" group="people" @start="drag=true" @end="drag=false">
            <transition-group>
              <div v-for="(item) in list" :key="item.name" class="drag-item">
                <span class="el-icon-paperclip" />
                <span>{{ item.name }}</span>
                <span>{{ item.order }}</span>
              </div>
            </transition-group>
          </draggable>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="box">
          <draggable :list="list2" group="people" @start="drag=true" @end="drag=false">
            <transition-group>
              <div v-for="(item) in list2" :key="item.name" class="drag-item">
                <span class="el-icon-paperclip" />
                <span>{{ item.name }}</span>
                <span>{{ item.order }}</span>
              </div>
            </transition-group>
          </draggable>
        </div>
      </el-col>
    </el-row>
    <div v-drag class="drag-text" />
  </div>
</template>

<script>
import draggable from 'vuedraggable'
export default {
  components: {
    draggable
  },
  data() {
    return {
      // 列表
      list: [
        {
          'name': 'draggable',
          'order': 2,
          'fixed': true
        },
        {
          'name': 'for',
          'order': 4,
          'fixed': false
        },
        {
          'name': 'vue.js 2.0',
          'order': 5,
          'fixed': false
        },
        {
          'name': 'component',
          'order': 3,
          'fixed': false
        },
        {
          'name': 'vue.draggable',
          'order': 1,
          'fixed': false
        },
        {
          'name': 'based',
          'order': 6,
          'fixed': false
        },
        {
          'name': 'on',
          'order': 7,
          'fixed': true
        },
        {
          'name': 'Sortablejs',
          'order': 8,
          'fixed': true
        }
      ],
      list2: [
        {
          'name': 'Sortablejs',
          'order': 8,
          'fixed': true
        }
      ]
    }
  },
  methods: {
    order() {
      this.list = this.list.sort((a, b) => a.order - b.order)
      this.list2 = this.list2.sort((a, b) => a.order - b.order)
    }
  }
}
</script>

<style lang="less">
  .drag-item {
    border: 1px solid #ccc;
    width: 400px;
    height: 50px;
    display: flex;
    align-items: center;
    transition: all 0.3s;
    user-select: none;
    cursor: pointer;
    span{
       flex: 1
     }
    span:nth-child(1) {
      width: 50px;
    }
    span:nth-child(3) {
      width: 50px;
    }
  }
  .box {
    border: 1px solid red;
    min-height: 300px;
  }
  .drag-text {
    width: 100px;
    height: 100px;
    border: 1px solid #000;
    background: url('../assets/images/xxm.jpg') no-repeat;
    background-size: 100% 100%;
  }
</style>
